xibファイルでビューを作成して、ストーリーボードやコードから利用する方法(Swift3編)

1 はじめに

xibファイルでビューを定義して、カスタムクラスと紐付けると共に、これをストーリーボードからやコードから利用する方法をSwift3で簡単に整理しました。

2 xibの作成

File > New > File から Viewを選択し、新しいxibファイルを作成します。（名前は、XibView.xibとしました）

続いて、Viewを設計しますが、ここでは、簡単に、バックの色を変えて、ラベルをAutolayoutで中央に配置しました。

3 カスタムクラスの作成

File > New > File から Cocoa Touch Classを選択し、新しいカスタムクラスを作成します。

UIViewのサブクラスとし、名前は、XibView.swiftとしました。

4 紐付け

xibファイルとカスタムクラスの紐付けは、File's OwnerでCustom Classに指定することで行います。

これにより、@Outlet や @IBAction を、カスタムクラスで定義できるようになります。

5 カスタムクラスの実装

カスタムクラスの実装では、loadNib()でxibファイルを読み込んでビューに追加しています。

コードから生成された場合はinit(frame:)、ストーリーボードから生成された場合はinit(coder:)で、それぞれ初期化されますが、どちらの場合も、同じように処理されるようになっています。

import UIKit

class XibView: UIView {
    override init(frame: CGRect){
        super.init(frame: frame)
        loadNib()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        loadNib()
    }

    func loadNib(){
        let view = Bundle.main.loadNibNamed("XibView", owner: self, options: nil)?.first as! UIView
        view.frame = self.bounds
        self.addSubview(view)
    }

}

6 動作確認（ストーリーボードからの利用）

UIViewを配置し、Custom Classを設定します。

実行すると、ストーリーボードで配置した場所に、カスタムビューが表示されます。

7 動作確認（コードからの利用）

ボタンをタップした際に、カスタムビューを動的に生成するようにしてみました。

@IBAction func tapButton(_ sender: Any) {
    let xibView = XibView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
    view.addSubview(xibView)
}

下記は、その実行画面です。

8 最後に

今回は、簡単にxibの使用法を纏めてみました。 ストーリーボードからでも、コードからでも利用可能にしておくと、色々、使いやすいかも知れません。